<template>
  <div class="cart">
    <div class="top">
      <div>30天无忧退货</div>
      <div>48小时快速退款</div>
      <div>满88元免邮费</div>
    </div>
    <div class="cartlist">
      <div class="item" v-for="(item, index) in listData" :key="index">
        <div class="con">
          <div class="left">
            <div
              class="icon"
              @click="changeColor(index,item.goods_id)"
              :class="[listIds[index]?'active':'']"
            ></div>
            <div class="img">
              <img :src="item.list_pic_url" alt />
            </div>
            <div class="info">
              <p>{{item.goods_name}}</p>
              <p>￥{{item.retail_price}}</p>
            </div>
          </div>
          <div class="right">
            <div class="num">×{{item.number}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="fixed">
      <div class="left" @click="allCheck" :class="{'active':allcheck}">全选({{isCheckedNumber}})</div>
      <div class="right">
        <div>￥{{allPrice}}</div>
        <div @click="orderDown">下单</div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post, getStorageOpenId } from "../../utils/index";
export default {
  data() {
    return {
      openId: "",
      listData: [],
      listIds: [], //用于装商品id的，即只有勾选之后才将id放入到该数组中
      allcheck: false
    };
  },
  onShow() {
    this.openId = getStorageOpenId();
    this.getListData();
  },
  methods: {
    async getListData() {
      const data = await get("/cart/cartList", {
        openId: this.openId
      });
      this.listData = data.data;
    },
    changeColor(index, id) {
      if (this.listIds[index]) {
        this.$set(this.listIds, index, false);
      } else {
        this.$set(this.listIds, index, id);
      }
    },
    allCheck() {
      //-如果已经有几个是已经选中的了，那么先清空选中的
      this.listIds = [];
      if (this.allcheck) {
        this.allcheck = false;
      } else {
        this.allcheck = true;
        //全部选择
        for (let i = 0; i < this.listData.length; i++) {
          const element = this.listData[i];
          this.listIds.push(element.goods_id);
        }
      }
    },
    async orderDown() {
      //! 如果先选择商品再取消的话，listIds里面的值会变成fasle，但是还是有length的
      if (this.listIds.length == 0) {
        wx.showToast({
          title: "请选择商品",
          icon: "none",
          image: "",
          duration: 1500,
          mask: false
        });
        return false;
      }
      //=去除数组中空的false
      let newGoodsId = [];
      for (let i = 0; i < this.listIds.length; i++) {
        const element = this.listIds[i];
        if (element) {
          newGoodsId.push(element); //newGoodsId才是真实的想要下单的商品
        }
      }
      let goodsId = newGoodsId.join(",");
      const data = await post("/order/submitAction", {
        goodsId: goodsId,
        openId: this.openId,
        allPrice: this.allPrice
      });
      if (data) {
        wx.navigateTo({
          url: "/pages/order/main"
        });
      }
    }
  },
  computed: {
    isCheckedNumber() {
      let number = 0;
      for (let i = 0; i < this.listIds.length; i++) {
        //~在存放商品id的数组中存在了id
        if (this.listIds[i]) {
          number++;
        }
        if (number == this.listData.length && number !== 0) {
          this.allcheck = true;
        } else {
          this.allcheck = false;
        }
      }
      return number;
    },
    allPrice() {
      let price = 0;
      //=只展示被勾选的商品价格
      for (let i = 0; i < this.listIds.length; i++) {
        if (this.listIds[i]) {
          price +=
            Number(this.listData[i].retail_price) *
            Number(this.listData[i].number);
        }
      }
      return price;
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./style.less");
</style>